
<template>
  <div>
    <SearchForm :search-list="searchList" :search-params="searchParams">
      <template #button>
        <el-button type="danger" icon="el-icon-download" @click="onExport">导出</el-button>
      </template>
    </SearchForm>
    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-handle">
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="onSearch"></el-button>
        </div>
        <div class="table-box">
          <el-table
              size="large"
              stripe
              border
              v-loading="loading"
              max-height="420px"
              :data="tableData"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            <el-table-column show-overflow-tooltip align="center" v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
                <template v-if="item.type === 'select'">
                  <el-tag :type="item.tagType" v-if="item.isTag">{{ item.mapping[scope.row[item.prop]] }}</el-tag>
                  <span v-else>{{ item.mapping[scope.row[item.prop]] }}</span>
                </template>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box">
          <el-pagination
              background
              :current-page="pageNo"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize"
              @size-change="changePageSize"
              @current-change="changePageNo"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import crud from "@/mixins/crud";

export default {
  name: "index",
  mixins: [crud],
  data() {
    return {
      searchList: [
        {
          label: '账单时间',
          prop: 'billTime',
          multiple: true,
          name: 'date',
          dateType: 'datetimerange',
        },
          // 类型
        {
          label: '类型',
          prop: 'type',
          name: 'select',
          multiple: false,
          clearable: true,
          options: [
            {
              label: '代收入账',
              value: 1
            },
              // 代收手续费、余额增加(手动)、余额减少(手动)、提现/转账/结算、冻结、解冻、委托结算、提款驳回、代付驳回
            {
              label: '代收手续费',
              value: 2
            },
            {
              label: '余额增加(手动)',
              value: 3
            },
            {
              label: '余额减少(手动)',
              value: 4
            },
            {
              label: '提现/转账/结算',
              value: 5
            },
            {
              label: '冻结',
              value: 6
            },
            {
              label: '解冻',
              value: 7
            },
            {
              label: '委托结算',
              value: 8
            },
            {
              label: '提款驳回',
              value: 9
            },
            {
              label: '代付驳回',
              value: 10
            }
          ]
        },
          // 平台/商户订单 text
        {
          label: '平台订单号',
          prop: 'orderNo',
          name: 'input',
          clearable: true
        },
        {
          label: '商户订单号',
          prop: 'merchantOrderNo',
          name: 'input',
          clearable: true
        }
      ],
      searchParams: {
        // 账单时间
        billTime: []
      },
      columns: [
          // 交易流水号、平台订单号、商户单号、原金额、金额、变动后金额	、时间、类型
        { prop: 'orderNo', label: '平台订单号' },
        { prop: 'merchantOrderNo', label: '商户单号' },
        { prop: 'amount', label: '金额' },
        { prop: 'afterAmount', label: '变动后金额' },
        { prop: 'createTime', label: '时间' },
        { prop: 'type', label: '类型', type: 'select', isTag: true, tagType: 'success', mapping: { 1: '代收入账', 2: '代收手续费', 3: '余额增加(手动)', 4: '余额减少(手动)', 5: '提现/转账/结算', 6: '冻结', 7: '解冻', 8: '委托结算', 9: '提款驳回', 10: '代付驳回' } }
      ],
      tableData: [
        {
          tradeNo: '2021040100001',
          orderNo: '2021040100001',
          merchantOrderNo: '2021040100001',
          originalAmount: '100.00',
          amount: '100.00',
          afterAmount: '100.00',
          createTime: '2021-04-01 00:00:00',
          type: 1
        },
        {
          tradeNo: '2021040100001',
          orderNo: '2021040100001',
          merchantOrderNo: '2021040100001',
          originalAmount: '100.00',
          amount: '100.00',
          afterAmount: '100.00',
          createTime: '2021-04-01 00:00:00',
          type: 1
        }
      ]
    }
  },
  methods: {
    onExport() {}
  }
}
</script>

<style scoped lang="scss">

</style>
